<template>
  <div class="Rou">
    <return></return>
    <div class="wrap" ref="rou">
      <div>
        <div class="card" v-for="item of rouList" :key="item.id">
          <img class="card-img-top" :src="item.src" alt="Card image cap">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Return from "@/components/common/Return";
import BScroll from "better-scroll";
export default {
  name: "Rou",
  data() {
    return {
      rouList: []
    };
  },
  methods: {
    getRouInfo() {
      this.$axios.get("static/mock/test.json").then(res => {
        this.rouList = res.data.data.recoList;
      });
    }
  },
  mounted() {
    this.getRouInfo();
    this.scroll = new BScroll(this.$refs.rou, {
      click: true,
      mouseWheel: true
    });
  },
  components: {
    Return
  }
};
</script>


<style scoped>
.wrap {
  position: absolute;
  top: 2.4rem;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
</style>
